<template>
  <div class="map-flay">
    <div class="map-direction">
      <div class="text">
        <div style="display: flex">
          <svg
            t="1751003876691"
            class="icon"
            viewBox="0 0 1027 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="36843"
            width="20"
            height="20"
            fill="#ffffff59"
            style="transform: rotate(180deg)"
          >
            <path
              d="M42.666667 256c25.6 0 42.666667 17.066667 42.666666 42.666667 0 213.333333 157.866667 384 354.133334 384 51.2 0 98.133333-12.8 145.066666-34.133334 102.4-51.2 174.933333-149.333333 200.533334-268.8l-110.933334 72.533334c-21.333333 12.8-46.933333 8.533333-59.733333-12.8-12.8-21.333333-8.533333-46.933333 12.8-59.733334l187.733333-119.466666h4.266667c4.266667 0 4.266667 0 8.533333-4.266667H853.333333c4.266667 0 4.266667 0 8.533334 4.266667 4.266667 0 4.266667 4.266667 8.533333 4.266666l4.266667 4.266667 4.266666 4.266667 140.8 187.733333c12.8 17.066667 8.533333 46.933333-8.533333 59.733333-8.533333 4.266667-17.066667 8.533333-25.6 8.533334-12.8 0-25.6-4.266667-34.133333-17.066667l-76.8-102.4c-29.866667 136.533333-119.466667 256-243.2 315.733333-55.466667 29.866667-119.466667 42.666667-183.466667 42.666667C196.266667 768 0 558.933333 0 298.666667c0-25.6 17.066667-42.666667 42.666667-42.666667z"
              p-id="36844"
            ></path>
          </svg>
          <el-icon class="icon"><ArrowUp /></el-icon>
          <svg
            t="1751001111270"
            class="icon"
            viewBox="0 0 1027 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="33236"
            width="20"
            height="20"
            fill="#ffffff59"
            style="transform: rotate(-180deg)"
          >
            <path
              d="M984.509013 256c-25.6 0-42.666667 17.066667-42.666666 42.666667 0 213.333333-157.866667 384-354.133334 384-51.2 0-98.133333-12.8-145.066666-34.133334C335.97568 597.333333 263.442347 499.2 237.842347 384l110.933333 72.533333c21.333333 12.8 46.933333 8.533333 59.733333-12.8 12.8-21.333333 8.533333-46.933333-12.8-59.733333L207.97568 264.533333h-4.266667c-4.266667 0-4.266667 0-8.533333-4.266666 0-4.266667 0-4.266667-4.266667-4.266667h-4.266666-4.266667c-4.266667 0-4.266667 0-8.533333 4.266667-4.266667 0-4.266667 0-8.533334 4.266666-4.266667 0-4.266667 4.266667-8.533333 4.266667l-4.266667 4.266667-4.266666 4.266666-140.8 187.733334c-12.8 17.066667-8.533333 46.933333 8.533333 59.733333 8.533333 4.266667 17.066667 8.533333 25.6 8.533333 12.8 0 25.6-4.266667 34.133333-17.066666l76.8-102.4c29.866667 136.533333 119.466667 256 243.2 315.733333 55.466667 29.866667 119.466667 42.666667 183.466667 42.666667C830.909013 768 1027.17568 558.933333 1027.17568 298.666667c0-25.6-17.066667-42.666667-42.666667-42.666667z"
              p-id="33237"
            ></path>
          </svg>
        </div>
        <div style="display: flex">
          <p>Q</p>
          <p>W</p>
          <p>E</p>
        </div>
      </div>
      <div class="text" style="margin-top: 20px">
        <div style="display: flex">
          <el-icon class="icon"><ArrowLeft /></el-icon>
          <el-icon class="icon"><ArrowDown /></el-icon>
          <el-icon class="icon"><ArrowRight /></el-icon>
        </div>
        <div style="display: flex">
          <p>A</p>
          <p>S</p>
          <p>D</p>
        </div>
      </div>
    </div>
    <svg
      t="1750989178798"
      class="iconflay"
      viewBox="0 0 1240 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="32184"
      width="40"
      height="40"
    >
      <path
        d="M1152.6950876 62L62 151.51584219l322.85065869 335.30615859z"
        fill="#49acff"
        p-id="32185"
        data-spm-anchor-id="a313x.search_index.0.i10.34c33a81fy1Zrx"
        class="selected"
      ></path>
      <path
        d="M1152.6950876 62l-622.59700958 900-129.09398378-447.20986113z"
        fill="#418cdb"
        p-id="32186"
        data-spm-anchor-id="a313x.search_index.0.i7.34c33a81fy1Zrx"
        class=""
      ></path>
    </svg>
    <div class="map-direction">
      <div class="text">
        <div style="display: flex">
          <el-icon class="icon"><Upload /></el-icon>
        </div>
        <div>
          <p>C</p>
        </div>
      </div>
      <div class="text" style="margin-top: 20px">
        <div style="display: flex">
          <el-icon class="icon"><Download /></el-icon>
        </div>
        <div>
          <p>Z</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, defineProps } from 'vue';
import { ElIcon, ElInput, ElSelect, ElOption, ElTooltip } from 'element-plus';
const props = defineProps({});
const emit = defineEmits([]);

// 生命周期
onMounted(() => {});
</script>

<style scoped lang="scss">
.map-flay {
  position: absolute;
  bottom: 10vh;
  left: 30%;
  display: flex;

  .iconflay {
    margin: 0 40px;
    transform: rotate(-60deg);
  }

  .map-direction {
    // margin-right: 40px;
    .text {
      padding: 4px 10px 10px 0;
      background: rgb(0 0 0 / 65%);
      border-radius: 4px;

      p {
        width: 24px;
        height: 24px;
        margin-left: 10px;
        font-size: 14px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background-color: #3c3c3c;
        border-radius: 2px;

        &:hover {
          background-color: #5d5f61;
        }
      }

      .icon {
        width: 24px;
        height: 24px;
        padding: 4px;
        margin-left: 10px;
        color: #ffffff59;
      }
    }
  }
}

:deep(.amap-icon) {
  transform: rotate(-60deg);
}
</style>
